<template>
	<div class="S_Performance">
		<div class="one_part">
			<!-- <nav-li></nav-li> -->
			<nav>
				<ul class="nav" id="nav">
					<router-link id="weekli" class="cur" tag="li" :to="{path:'/S_Performance-week',query:{empNo:personalId}}">周</router-link>
					<router-link id="yearli" tag="li" :to="{path:'/S_Performance-year',query:{empNo:personalId}}">年</router-link>
					<!-- <router-link tag="li" :to="{path:'/S_Performance-team',query:{empNo:personalId}}" id="teamLi">团队</router-link> -->
				</ul>
			</nav>
			<ul class="ranking">
				<li><span class="small" v-cloak>{{weekData.daytime || 0}}</span><p>驾驶时长/h</p></li>
				<li>
					<big v-cloak>{{weekData.daytimes || 0}}
					<span class="pos_a">
						<i class="ion ion-help-circled icon_daytimes_tip" @click="showDaytimesTip"></i>
						<span class="daytimes_tip" v-if="isShowDaytimesTip">车辆一次打火到熄火记为一个行程</span>
					</span>
					</big>
					<p>行程次数</p>
				</li>
				<li><span class="small" v-cloak>{{weekData.daykm || 0}}</span><p>驾驶里程/KM</p></li>
			</ul>
			<router-link tag="span" :to="{path:'/getZeroRankingList',query:{empNo:personalId}}" class="rank_btn">
				<i class="ion ion-arrow-graph-up-right"></i>
				<p>周零违规</p>
			</router-link>
		</div>
		<div class="two week_two">
			<i class="icon_castrol circle eye"></i>
			<p>您有 <router-link tag="span" :to="{path:'/getIllegalByWeek',query:{empNo:personalId}}" class="fc_highlight" v-cloak>{{weekData.illTime || 0}}</router-link> 次新增违章，请注意谨慎驾驶</p>
		</div>
		<div class="week_con">
			<h3>· <b class="fc_orange">个人</b>/<i class="fc_green">全国平均</i></h3>
			<ul>
				<li v-for="(list,index) of weekList" @click="listTab(list,index)">
					<div>
						<h6>{{list.name}}</h6>
						<span class="num" v-cloak>
							<b class="fc_orange">{{list.personal || 0}}</b>/<i class="fc_green">{{list.countryAvg || 0}}</i>
						</span>
						<progress :class="list.stateClass" :value="list.personalAvg || 0" :max="list.countryAvg || 0"></progress>
					</div>
					<ol v-if="list.isOpen">
						<!-- 超时 -->
						<li v-if="index == 0" v-for = "data of list.detailList">
							<span>时间:<b>{{data.dateFrom}}</b></span>
						</li>
						<!-- 超速 -->
						<li v-if="index == 1" v-for = "data of list.detailList">
							<span>时间: <b>{{data.dateFrom}}</b></span>
							<span>速度: <b>{{data.overSpeed}}</b></span>
						</li>
						<!-- 夜驾 -->
						<!-- <li v-if="index == 2"></li> -->
						<!-- 急加/减速 -->
						<li v-if="index == 3" v-for = "data of list.detailList">
							<span>类型名称: <b>{{data.name}}</b></span>
							<span>时间: <b>{{data.dateFrom}}</b></span>
							<span>开始速度: <b>{{data.startSpeed}}</b></span>
							<span>结束速度: <b>{{data.endSpeed}}</b></span>
							<span>速度差: <b>{{data.speedDiff}}</b></span>
						</li>
					</ol>
				</li>
			</ul>
		</div>
		<ul class="items mt10" v-if="wtiList.length>0">
			<li class="has_right_attach" v-for="list of wtiList">
				<span class="fc_green">[{{list.empName}}]</span>
				<span>{{list.daytime}}</span>
				<span class="attach fc_main ft15">{{list.daykm}}</span>
			</li>
		</ul>
	</div>
</template>
<script type="text/javascript">
	// import NavLi from './nav'
	import getInterface from '../../assets/js/insterface'
	import NavLiShow from '../../assets/js/performace/navPermission'

	export default{
		mixins:[NavLiShow],
		data(){
			return{
				'personalId':'',
				'overtimeData':[],
				'overSpeedData':[],
				'praidData':[],
				'weekList':[
					{
						'name':'超时',
						'personal':'',
						'countryAvg':'',
						'stateClass':'normal',
						'isOpen':false,
						'detailList':[]
					},
					{
						'name':'超速',
						'personal':'',
						'countryAvg':'',
						'stateClass':'normal',
						'isOpen':false,
						'detailList':[]
					},
					{
						'name':'夜驾',
						'personal':'',
						'countryAvg':'',
						'stateClass':'normal',
						'isOpen':false,
						'detailList':[]
					},
					{
						'name':'急加/减速',
						'personal':'',
						'countryAvg':'',
						'stateClass':'normal',
						'isOpen':false,
						'detailList':[]
					}
				],
				'weekData':'',
				'wtiList':[],
				'isShowDaytimesTip':false
			}
		},
		mounted(){
			document.title="个人绩效";
			this.$el.parentElement.parentNode.style.background = '#fafafa';
      		this.personalId = this.$route.query.empNo;
			this.getWeekData();
		},
		methods:{
			getWeekData(){
				let weekUrl= getInterface.getWeekUrl+ this.$route.query.empNo;
				this.$http.get(weekUrl,{emulateJSON: true})
				.then((response) =>{
					console.log(response);
					if(response.data != null){
						this.weekData = response.data;

						this.weekList[0].personal = response.data.fatigue;
						this.weekList[0].countryAvg = response.data.fatigueAvg;
						this.weekList[1].personal = response.data.speed;
						this.weekList[1].countryAvg = response.data.speedAvg;
						this.weekList[2].personal = response.data.night;
						this.weekList[2].countryAvg = response.data.nightAvg;
						this.weekList[3].personal = response.data.rapid;
						this.weekList[3].countryAvg = response.data.rapidAvg;

						switch(response.data.fatigueState){
							case 1:
								this.weekList[0].stateClass = 'normal'
								break;
							case 2:
								this.weekList[0].stateClass = 'warn'
								break;
							case 3:
								this.weekList[0].stateClass = 'danger'
								break;
						}
						switch(response.data.nightState){
							case 1:
								this.weekList[1].stateClass = 'normal'
								break;
							case 2:
								this.weekList[1].stateClass = 'warn'
								break;
							case 3:
								this.weekList[1].stateClass = 'danger'
								break;
						}
						switch(response.data.rapidState){
							case 1:
								this.weekList[2].stateClass = 'normal'
								break;
							case 2:
								this.weekList[2].stateClass = 'warn'
								break;
							case 3:
								this.weekList[2].stateClass = 'danger'
								break;
						}
						switch(response.data.speedState){
							case 1:
								this.weekList[3].stateClass = 'normal'
								break;
							case 2:
								this.weekList[3].stateClass = 'warn'
								break;
							case 3:
								this.weekList[3].stateClass = 'danger'
								break;
						}
					}

				})
			},
			listTab(list,index){
				for(let i=0; i<this.weekList.length; i++){
					this.weekList[i].isOpen = false;
				};
				switch(index){
					case 0:
						this.getWeekOvertimeDetail();
						openFunc(list);
						break;
					case 1:
						this.getWeekSpeedDetail();
						openFunc(list);
						break;
					case 2:
						this.$router.push({path:'/getApprovalList',query:{empNo:this.personalId}});
						break;
					case 3:
						this.getWeekPraidDetail();
						openFunc(list);
						break;
				}
				function openFunc(list){
					setTimeout(()=>{
						// console.log(list.detailList.length);
						if(list.detailList.length>0){
							list.isOpen = true;
						}
					},1000)
				}
			},
			getWeekOvertimeDetail(){
				let weekOvertimeDetailUrl = getInterface.getWeekOvertimeDetailUrl + this.personalId;
				this.$http.get(weekOvertimeDetailUrl,{emulateJSON:true})
				.then((response) =>{
					console.log(response);
					let resData = response.data;
					if(resData.length > 0){
						this.weekList[0].detailList = resData;
					}
				})
			},
			getWeekSpeedDetail(){
				let weekSpeedDetailUrl = getInterface.getWeekSpeedDetailUrl + this.personalId;
				this.$http.get(weekSpeedDetailUrl,{emulateJSON:true})
				.then((response) =>{
					console.log(response);
					let resData = response.data;
					if(resData.length > 0){
						this.weekList[1].detailList = resData;
					}
				})
			},
			getWeekPraidDetail(){
				let weekPraidDetailUrl = getInterface.getWeekPraidDetailUrl + this.personalId;
				this.$http.get(weekPraidDetailUrl,{emulateJSON:true})
				.then((response) =>{
					console.log(response);
					let resData = response.data;
					if(resData.length > 0){
						this.weekList[3].detailList = resData;
					}
					console.log(this.weekList[3].detailList);
				})
			},
			showDaytimesTip(){
				this.isShowDaytimesTip = true;
				let vue = this;
				setTimeout(()=>{
					vue.isShowDaytimesTip = false;
				},5000)
			}
		}
	}
</script>
